<template>
  <div class="update">
    <div class="left">
      <!-- <div class="checkAll">
        <el-checkbox v-model="checkAll" @change="handleCheckAllChange"
          >当前页</el-checkbox
        >
      </div> -->
    </div>
    <div class="right">
      <el-button
        class="btn"
        :disabled="checkAll.length == 0"
        @click="batchDownload"
        v-show="!isEdit"
        v-auth="'BATCH_DOW'"
        >批量下载</el-button
      >
      <el-button
        class="btn"
        v-auth="'BATCH_DEL'"
        :disabled="checkAll.length == 0"
        @click="batchDelete"
        v-show="!isEdit"
        >批量删除</el-button
      >
      <el-button
        class="btn"
        v-auth="'BATCH_END'"
        :disabled="checkAll.length == 0"
        @click="batchFinish"
        v-show="!isEdit"
        >批量结束</el-button
      >
      <el-button type="primary" class="btn last" @click="newLiveCode" v-show="!isEdit"
        v-auth="'NEW_CODE'"
        >新建活码</el-button
      >
    </div>
  </div>
  <Dialog :appDialog="appDialog">
    <div class="msg">确定是要批量删除吗？</div>
  </Dialog>
</template>

<script setup lang="ts">
import { ref, reactive, onBeforeUnmount, withDefaults, defineProps } from "vue";
import router from "@/router";
import bus from "@/utils/bus";
import Dialog from "@/components/Dialog.vue";

const emit = defineEmits(["batchDownload", "batchFinish", "batchDelete"]);
// const batchEnd = defineEmits(["batchFinish"]);
const checkAll = ref([]);

const props = withDefaults(
  defineProps<{
    isEdit: boolean,
    group_id: number | string
  }>(),
  {
    isEdit: false,
    group_id: 0
  }
);
// 全选
const handleCheckAllChange = () => {};
// 批量下载
const batchDownload = () => {
  // if (checkAll.value.length == 0) return;
  emit("batchDownload");
};
//批量删除
const batchDelete = () => {
  if (checkAll.value.length == 0) return;
  appDialog.visible = true;
};
//批量结束
const batchFinish = () => {
  if (checkAll.value.length == 0) return;
  emit("batchFinish");
};
//新建活码
const newLiveCode = () => {
  bus.emit("emptyStore", {});
  router.push({ path: "/smartMarketing/drainage/channelCode/newGroupCode", query: {group_id:props.group_id} });
};
// 弹框取消
const cancelHandel = () => {
  appDialog.visible = false;
};
const submitHandel = () => {
  emit("batchDelete");
  appDialog.visible = false;
};
// 弹框配置项
const appDialog = reactive({
  visible: false,
  title: "批量删除",
  width: "460px",
  cancel: cancelHandel,
  submit: submitHandel,
  cancelText: "取消",
  submitText: "确定",
  isInit: false, //是否重置
  isChooseDisabled: false, //重新打开传递进来的数据是否重置
  chooseArr: [], // 传递进来选中的数据
});
const isCheck = (data: any) => {
  checkAll.value = data;
};
bus.on("isCheck", isCheck);
onBeforeUnmount(() => {
  bus.off("isCheck", isCheck);
});
</script>

<style scoped lang="scss">
.el-button.is-disabled.is-plain,
.el-button.is-disabled.is-plain:focus,
.el-button.is-disabled.is-plain:hover {
  background-color: #ffffff;
  border-color: #e4e7ed;
  color: #c0c4cc;
}
.update {
  width: 100%;
  padding: 10px 0 16px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  .left {
    display: flex;
    align-items: center;
    .checkAll {
      padding: 0px 12px;
      background: #f9f9f9;
      border-radius: 1px;
      border: 1px solid #eaeaea;
    }
    .updateTime {
      font-size: 14px;
      font-weight: 300;
      color: #33302d;
      line-height: 14px;
      margin-left: 28px;
    }
  }
  .right {
    display: flex;
    // .btn {
    //   padding: 11px 12px;
    //   background: #ffffff;
    //   border-radius: 4px;
    //   border: 1px solid #ff6b00;
    //   color: #ff6b00;
    //   cursor: pointer;
    //   margin-left: 14px;
    // }
    .last {
      color: #fff;
      background: #ff6b00;
    }
  }
}
.msg {
  text-align: center;
  padding: 50px 0;
}
</style>
